<template>
  <!--  <HeaderDetail />-->
  <div style="margin: 10px 6% 0 6%">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Design Library</span>
        </div>
      </template>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">
          <span>Seq Name:</span>
          <el-input
            v-model="searchInfo.id"
            placeholder="Please input"
            style="width: 95%"
          />
        </el-col>
        <el-col :span="6">
          <span>Scientist:</span>
          <el-input
                  v-model="searchInfo.time"
                  placeholder="Please input"
                  style="width: 95%"
          />
        </el-col>
        <el-col :span="6">
          <span>Project Code:</span>
          <el-select
            v-model="searchInfo.projectCode"
            multiple
            style="width: 95%"
            placeholder=""
          >
            <el-option
              v-for="items in options3"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <span>Design Date:</span>
          <el-date-picker
            v-model="searchInfo.date"
            type="daterange"
            unlink-panels
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            :shortcuts="shortcuts"
            style="width: 97%"
          />
        </el-col>
      </el-row>
      <el-row>
       <!-- <el-col :span="2">
          <el-checkbox v-model="checked1" label="My Design" size="large" />
        </el-col>-->
        <el-col :span="6">
          <el-button type="primary">SEARCH</el-button>
          <el-button type="info">RESET</el-button>
          <!--<el-button type="success" @click="goAdd()">
            <el-icon><plus /></el-icon>
            NEW</el-button
          >-->
        </el-col>
      </el-row>
    </el-card>
    <div style="margin-top: 10px">
      <el-row>
        <el-col>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span class="search-card-title">Data Table</span>
                <el-col
                  :span="6"
                  :offset="16"
                  style="text-align: end; padding-right: 10px"
                >
                  <el-button type="success" @click="dialogVisible = true">
                    <el-icon><plus /></el-icon>
                    Registration Request
                  </el-button>
                  <el-button plain="default" :icon="Download">
                    <el-icon><download /></el-icon>
                    Export to Excel
                  </el-button>
                </el-col>
              </div>
            </template>
            <el-tabs type="border-card" v-model="activeName">
              <el-tab-pane label="Plasmid" name="plasmid">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :row-style="rowStyle"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="40">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.isCheck" />
                </template>
              </el-table-column>
              <el-table-column fixed label="Seq Name" width="100">
                <template #default="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column
                property="date"
                label="Design Date"
                width="100"
              />
              <el-table-column property="time" label="Scientist" width="100" />
              <el-table-column property="compound" label="Type" width="100" />
              <el-table-column
                property="cell"
                label="Project Code"
                width="100"
              />
              <el-table-column
                property="source"
                label="CDS Structure"
                width="100"
              />
              <el-table-column property="note" label="CDS Sequence" />
              <el-table-column property="status" label="Status" width="80" />
              <el-table-column label="Operations" width="150">
                <template #default>
                  <el-button
                    type="success"
                    size="small"
                    style="cursor: pointer"
                    title="Approve"
                    @click="goDetail()"
                  >
                    <el-icon><document /></el-icon
                  ></el-button>
                  <el-button
                    type="primary"
                    size="small"
                    :icon="Edit"
                    style="cursor: pointer"
                    title="Edit"
                    @click="goAdd()"
                  >
                    <el-icon><edit-pen /></el-icon
                  ></el-button>
                  <el-popconfirm title="Are you sure to delete this?">
                    <template #reference>
                      <el-button
                        type="danger"
                        size="small"
                        style="cursor: pointer"
                        title="Delete"
                      >
                        <el-icon><delete /></el-icon>
                      </el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 100, 200, 300, 400]"
              layout="total, sizes, prev, pager, next"
              :total="20"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
              </el-tab-pane>
              <el-tab-pane label="Antibody" name="2">Antibody design list</el-tab-pane>
              <el-tab-pane label="mRNA" name="3">mRNA design list</el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog
            v-model="dialogVisible"
            title="Registration Request"
            width="40%"
            :before-close="handleClose"
    >
      <div>
        <el-row>
          <el-col :span="12">
            <span>Approver:</span>
            <el-input
                    v-model="searchInfo.approver"
                    placeholder="Sheng Zhu"
                    style="width: 95%; padding-bottom: 10px"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>Comments:</span>
            <el-input
                    v-model="searchInfo.note"
                    placeholder="Please input"
                    type="textarea"
                    style="width: 95%"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" style="position: relative;padding-top: 30px;">
            <el-button type="primary" @click="goReg()">SUBMIT</el-button>
            <el-button type="info" @click="handleClose()">CANCEL</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ref } from "vue";
// import HeaderDetail from "../../components/HeaderDetail.vue";
import {
  RemoveFilled,
  Download,
  Plus,
  Delete,
  Document,
  EditPen,
} from "@element-plus/icons-vue";
import router from "@/router";
export default {
  name: "DesignLibrary",
  components: {
    // HeaderDetail,
    // RemoveFilled,
    Download,
    Plus,
    Delete,
    Document,
    EditPen,
  },
  setup() {
    const activeName = ref("plasmid");
    const value2 = ref("");
    const shortcuts = [
      {
        text: "Last week",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: "Last month",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: "Last 3 months",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ];

    const goDetail = () => {
      router.push("/sequenceRecordDetails");
    };
    const goAdd = () => {
      router.push("/sequenceDesign");
    };
    const goReg = () => {
      router.push("/requestManagement");
    };
    return {
      goDetail,
      goAdd,
      goReg,
      activeName
    };
  },
  data() {
    return {
        dialogVisible: false,
      searchInfo: [
        {
          date: "",
          compound: "",
          source: "",
          cell: "",
        },
      ],
      currentPage: 1,
      pageSize: 10,
      options1: [
        {
          value: "p",
          label: "plasmid",
        },
        {
          value: "r",
          label: "antibody",
        },
        {
          value: "v",
          label: "vector",
        },
        {
          value: "m",
          label: "mRNA",
        },
      ],
      options2: [
        {
          value: "1",
          label: "CRO",
        },
        {
          value: "2",
          label: "Internal",
        },
      ],
      options3: [
        {
          value: "CDI",
          label: "CDI",
        },
        {
          value: "PSA",
          label: "PSA",
        },
      ],
      tableData: [
        {
          name: "RV-CDI-p001",
          color: "#FFE0ED",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA...",
            status: "Designed",
        },
        {
          name: "RV-CDI-p001",
          color: "#CDF6F2",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA...",
            status: "Designed",
        },
        {
          name: "RV-CDI-p001",
          color: "#D7E5FF",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA...",
            status: "Designed",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA...",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA...",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA...",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
        {
          name: "RV-CDI-p001",
          date: "2021.12.03",
          time: "Yang Xiang",
          compound: "plasmid",
          cell: "ToxB",
          source: "IL10/Hg0",
          note: "ATGAAGACAATCATCGCCCTGAGCTACATCCTGTGTCTGGTGTTCGCCCAGAAGCTGCCCGGCAATGACAATTCCA",
            status: "Requested",
        },
      ],
    };
  },
  methods: {
    deleteSearchInfo(index) {
      try {
        this.searchInfo.splice(index, 1);
      } catch (e) {
        console.error("Error Deleting Detail Item: ", e);
      }
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`);
    },
    handleCurrentChange(val) {
      console.log(`current page: ${val}`);
    },
      handleClose () {
          this.dialogVisible = false;
      }
  },
};
</script>
<style scoped>
.search-card-title {
  font-size: 16px;
  font-weight: 500;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.download-icon {
  position: relative;
  top: 3px;
  color: #166fe7;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 100%;
}
.el-card /deep/.el-card__header {
  background-color: #64bce7;
  padding: 6px;
}
.el-card /deep/.el-card__body {
  padding: 8px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px getCssVar("border-color");
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
